<script setup lang="ts">
import type { CSSProperties } from "vue";
import { ref } from "vue";
import { Codemirror } from "vue-codemirror";
import { vue } from "@codemirror/lang-vue";
import { oneDark } from "@codemirror/theme-one-dark";
interface Props {
  codeStyle?: CSSProperties; // 代码样式
  dark?: boolean; // 是否暗黑主题
  code?: string; // 代码字符串
}
const props = withDefaults(defineProps<Props>(), {
  // placeholder: 'Code goes here...',
  codeStyle: () => {
    return {};
  },
  dark: false,
  code: "",
  // autofocus: false,
  // disabled: false,
  // indentWithTab: true,
  // tabSize: 2
});
const extensions = props.dark ? [vue(), oneDark] : [vue()];
const codeValue = ref(props.code);
// console.log('1010101010')
// console.log(codeValue.value)
const emits = defineEmits(["update:code", "ready", "change", "focus", "blur"]);
</script>
<template>
  <div>
    <Codemirror
      v-model="codeValue"
      :style="codeStyle"
      :extensions="extensions"
      v-bind="$attrs"
    />
  </div>
</template>
